<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery图片懒加载</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="./js/jquery-2.1.1.min.js"></script>
    <script src="./js/jaliswall.js"></script>
    <!-- 懒加载插件：jQuery之家: http://www.htmleaf.com/ ，搜索 懒加载即可。 -->
    <style>
        .wrap {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .img-wrap {
            margin: 0 auto;
            padding: 0;
            width: 90%;
            height: 90%;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="img-wrap" id="gallery-wrapper">
            <div class="wall">
                <div class="article">
                    <img src="../image/1.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/12.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/29.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/10.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/38.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/3.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/45.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/43.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/49.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/46.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/58.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/51.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/57.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/56.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/14.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/54.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/52.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/1.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/12.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/29.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/10.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/38.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/3.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/45.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/43.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/49.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/46.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/58.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/51.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/57.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/56.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/14.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/54.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/52.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/1.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/12.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/29.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/10.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/38.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/3.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/45.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/43.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/49.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/46.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/58.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/51.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/57.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/56.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/14.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/54.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/52.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/1.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/12.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/29.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/10.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/38.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/3.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/45.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/43.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/49.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/46.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/58.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/51.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/57.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/56.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/14.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/54.png" />
                    <h2>FuFu Miku</h2>
                </div>
                <div class="article">
                    <img src="../image/52.jpg" />
                    <h2>FuFu Miku</h2>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
    <script type="text/javascript" src="js/jaliswall.js"></script>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="./dist/EasyLazyload.min.js"></script>
    <script type="text/javascript">
        // 图片懒加载：图片使用延迟加载，可提高网页下载速度。它也可以帮助减轻服务器负载。
        // 当我们页面滑动到可视区域，再显示图片。即只加载屏膜中的图片。
        $(function () {
            $('.wall').jaliswall({ item: '.article' });
        });
        //懒加载
        lazyLoadInit({
            coverColor: "white",
            coverDiv: "<h1>test</h1>",
            offsetBottom: 0,
            offsetTopm: 0,
            showTime: 1100,
            onLoadBackEnd: function (i, e) {
                console.log("onLoadBackEnd:" + i);
            }
            , onLoadBackStart: function (i, e) {
                console.log("onLoadBackStart:" + i);
            }
        });
    </script>
</body>

</html>